<template>
  <div class="container" :style="containerStyle">
    <navbar title="淘宝拉新" theme="light"></navbar>
    <list>
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div @click="newerClick" class="center">
          <div class="time-info">
            <text class="time-info-text">活动时间：5.1-5.30</text>
          </div>
        </div>
      </cell>
      <cell>
        <div class="main-box">
          <div class="info-box">
            <image class="info-box-img" :src="detailImgSrc"></image>
          </div>
          <div class="detail-item">
            <div class="detail-item-row">
              <text class="detail-item-num">1.</text>
              <text class="detail-item-text">分享淘宝官方拉新口令、链接或二维码给好友</text>
            </div>
            <div class="detail-item-row">
              <text class="detail-item-num">2.</text>
              <text class="detail-item-text">好友打开淘宝官方拉新页面，输入未注册过淘宝的手机号，领取188元淘宝官方大礼包</text>
            </div>
            <div class="detail-item-row">
              <text class="detail-item-num">3.</text>
              <text class="detail-item-text">好友用领取礼包的手机号注册淘宝并登录淘宝，在72小时内在手机淘宝内完成下单和付款</text>
            </div>
            <div class="detail-item-row">
              <text class="detail-item-num">4.</text>
              <text class="detail-item-text">好友在手机淘宝下单购买后，并且在次月15号之前确认收货，您将获得辣小客平台20元现金奖励</text>
            </div>
            <div class="detail-item-row">
              <text class="detail-item-num">5.</text>
              <text class="detail-item-text">辣小客会将现金奖励发放到你的账户余额，您可以对余额进行提现操作。</text>
            </div>
          </div>

          <div class="share-btns">
            <div class="share-btn" to="pyq" @click="shareBtnClick">
              <text class="share-btn-icon btn-wx icon activeable">&#xe628;</text>
              <text class="share-btn-text">朋友圈</text>
            </div>
            <div class="share-btn" to="wxhy" @click="shareBtnClick">
              <text class="share-btn-icon btn-wx icon activeable">&#xe66a;</text>
              <text class="share-btn-text">微信好友</text>
            </div>
            <div class="share-btn" to="qrcode" @click="shareBtnClick">
              <text class="share-btn-icon btn-img icon activeable">&#xe65a;</text>
              <text class="share-btn-text">面对面扫码</text>
            </div>
            <div class="share-btn" @click="copyKl">
              <text class="share-btn-icon btn-copy icon activeable">&#xe61f;</text>
              <text class="share-btn-text">复制口令</text>
            </div>
          </div>
        </div>
      </cell>
      <cell>
        <div class="yg-info">
          <wxc-cell :has-arrow="true"
                    @wxcCellClicked="showPullNewDetail"
                    url="webpage.js?code=ABOUT_US"
                    :has-bottom-border="false"
                    :has-top-border="false">
            <div class="cell-title" slot="title">
              <wxc-rich-text :config-list="ygText"></wxc-rich-text>
              <text class="weak-text">邀请更多新人，获得更多奖励</text>
            </div>
          </wxc-cell>
        </div>
      </cell>
    </list>
    <wxc-mask height="1047"
              width="700"
              border-radius="40"
              duration="200"
              mask-bg-color="#FFFFFF"
              has-animation="true"
              :has-overlay="true"
              :show-close="true"
              :show="qrcodeShow"
              @wxcMaskSetHidden="wxcMaskSetHidden">
      <image resize="stretch" :src="sharePicUrl" style="width: 700; height: 1047"></image>
    </wxc-mask>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";

  .container {
    background-image: $gradient-bg-primary;
    transition: transform .3s linear;
  }

  .center {
    align-items: center;
    margin-top: 40px;
  }

  .lxr-img {
    width: 480px;
    height: 76px;
  }

  .time-info {
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    &-text {
      /*background-color: #FEDA31;*/
      /*color: #B16C20;*/
      /*font-size: 28;*/
      /*padding: 5 30;*/
      /*border-radius: 20;*/
      color: #fff;
      font-size: 28px;
    }
  }

  .detail-item {
    padding: 40px;
    &-row {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
    }
    &-num {
      font-size: 24px;
      color: $color;
      position: absolute;
      top: 2px;
      left: 0;
    }
    &-text {
      font-size: 24px;
      color: $color;
      line-height: 30px;
    }
  }

  .main-box {
    margin: 15px 40px 20px;
    @include border(4px, solid, #fff);
    background-color: #fff;
    border-radius: 10px;
  }

  .info-box {
    background-color: #fa4900;
    align-items: center;
    padding: 20px 0;
    justify-content: center;
    &-img {
      width: 560px;
      height: 230px;
    }
  }

  .yg-info {
    margin: 0 40px;
    @include border(4px, solid, #fff);
    background-color: #fff;
    border-radius: 10px;
  }

  .share-btns {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 10px;
  }

  .share-btn {
    flex: 1;
    justify-content: center;
    align-items: center;
    &-icon {
      font-size: 60px;
      color: #ffffff;
      text-align: center;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      line-height: 100px;
    }
    &-text {
      color: $color;
      margin-top: 10px;
      font-size: 24px;
    }
  }

  .weak-text {
    font-size: 24px;
    color: $color-muted;
  }

  .btn-wx {
    background-color: #1FCB28;
  }

  .btn-qq {
    background-color: #43B1E9;
  }

  .btn-img {
    background-color: #A98264;
  }

  .btn-copy {
    background-color: $brand-warning;
  }

</style>
<script>

import {WxcCell, WxcMask, WxcRichText} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let weixinApi = weex.requireModule('weixinApi')
let clipboard = weex.requireModule('clipboard')
let login = require('./include/login')
require('./include/page-xdom')
let broadcastChannelKeys = require('./include/broadcast-channel-keys')
let BroadcastChannel = require('./include/broadcast-channel')
let loginBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.LOGIN)
module.exports = {
  mixins: [
    require('./mixin/page-loading'),
    require('./mixin/page-refresh')
  ],
  components: {
    WxcCell,
    WxcRichText,
    WxcMask,
    navbar: require('./components/navbar.vue')
  },
  props: {
    height: {default: 0}
  },
  data () {
    return {
      loaded: false,
      refreshing: false,
      refreshIndicatorScale: 0.2,
      lxrImgSrc: urlPath.assets('images/lxr/001.png'),
      detailImgSrc: urlPath.assets('images/lxr/002.png?v=2'),
      ygText: [
        {
          type: 'text',
          value: '当前预估奖励',
          style: {
            color: '#474747',
            fontSize: 28
          }
        },
        {
          type: 'text',
          value: '登录查看',
          style: {
            color: '#fb4748',
            fontSize: 36
          }
        },
        {
          type: 'text',
          value: '元',
          style: {
            color: '#474747',
            fontSize: 28
          }
        }
      ],
      shareInfo: {},
      sharePicUrl: '',
      statInfo: {},
      qrcodeShow: false,
      containerStyle: {}
    }
  },
  created () {
    loginBroadcastChannel.onmessage = (e) => {
      if (e.data) {
        this.loadData()
      } else {
      }
    }
    if (this.height) {
      this.containerStyle.height = this.height
    }
    login.check().done((flag) => {
      flag && Deferred.when(this.loadData()).always(() => {
        this.loaded = true
      })
    })
  },
  methods: {
    loadData (callback) {
      // Buffer.from('Hello World!').toString('base64')
      // Buffer.from(b64Encoded, 'base64').toString()
      return api.page.taobaoNewer.data().done(rs => {
        this.shareInfo = rs.data.shareInfo
        this.sharePicUrl = api.url.taobaoNewer.sharePic({url: this.shareInfo.url, t: new Date().getTime()})
        this.statInfo = rs.data.stat
        this.ygText[1].value = this.statInfo.estimatedRewards || '0'
        callback && callback()
      })
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    },
    newerClick () {
      this.loadData(() => {
        navigator.push('newer.js')
      })()
    },
    shareBtnClick: function (e) {
      this.loadData(() => {
        let to = e.target.attr.to
        clipboard.setString(this.shareInfo.text)
        if (to === 'pyq') {
          weixinApi.sendTimeline({
            images: [this.sharePicUrl],
            text: this.shareInfo.text
          }, flag => {
            if (!flag) {
              modal.alert({message: '您还没有安装微信，无法分享，请先安装微信！'})
            }
          })
        } else if (to === 'wxhy') {
          weixinApi.sendSession({
            images: [this.sharePicUrl]
          }, flag => {
            if (!flag) {
              modal.alert({message: '您还没有安装微信，无法分享，请先安装微信！'})
            }
          })
        } else if (to === 'qrcode') {
          this.qrcodeShow = true
        }
      })
    },
    copyKl () {
      this.loadData(() => {
        clipboard.setString(this.shareInfo.text)
        modal.toast({message: '口令已复制', duration: 0.5})
      })
    },
    wxcMaskSetHidden () {
      this.qrcodeShow = false
    },
    showPullNewDetail () {
      login.decorate(() => {
        navigator.push('tb-pull-new-detail-list.js')
      })()
    }
  }
}
</script>
